<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">姓名</text>
			<input class="input" type="text" v-model="userInfo.name" placeholder="提货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">电话</text>
			<input class="input" type="number" v-model="userInfo.mobile" placeholder="提货人手机号码" placeholder-class="placeholder" />
		</view>
		
		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
	import myCloud from '@/common/js/cloud.js';
	import myConst from '@/common/js/const.js';
	import { genID } from '@/common/js/util.js';
	import {
	    mapState,
		mapMutations  
	} from 'vuex'; 
	export default {
		data() {
			return {
				action:'',
				id:'',
				userId:'',
				data:[],
				userInfo: {
					name: '',
					mobile: ''
				}
			}
		},
		onLoad(option){
			let title = '新增提货人信息';
			if(option.type==='edit'){
				title = '编辑提货人信息'
				this.action = myConst.ACTION.EDIT
				this.userInfo = JSON.parse(option.data).userInfo
				this.id=JSON.parse(option.data)._id
			}else{
				this.action = myConst.ACTION.ADD
			}

			uni.setNavigationBarTitle({
				title
			})
		},
		computed: {
			...mapState(['hasLogin','userId'])
		},
		methods: {
			
			//提交
			confirm(){
				let data = this.userInfo;
				if(!data.name){
					this.$api.msg('请填写提货人姓名');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				const req = {
					action: this.action,
					_id:this.id,
					userId:this.userId,
					userInfo:this.userInfo,
					updatetime:new Date().getTime()
				}
			
				myCloud.callFunction(myConst.FUNC_NAME.B_SELFGET_USER,req,(res,e)=>{
					uni.showToast({
						title: '提交成功',
						icon:'none'
					});
					setTimeout(()=>{
						uni.navigateBack()
					}, 800)
				},true)
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>